<template>
  <div class="app-container">
    <comm-search @search="initList()" v-if="showSearch">
      <template #left>
        <el-form-item>
          <el-input
              v-model="queryParam.blurry"
              clearable
              placeholder="请输入你要搜索的内容"
              @keyup.enter.native="initList()"
              @clear="initList()"
          />
        </el-form-item>
      </template>
    </comm-search>
    <el-table :loading="loading" :data="dataList">
        <el-table-column type="expand">
          <template #default="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="请求方法">
                <span>{{ props.row.method }}</span>
              </el-form-item>
              <el-form-item label="请求参数">
                <span>{{ props.row.params }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="requestIp" label="IP" />
        <el-table-column :show-overflow-tooltip="true" prop="address" label="IP来源" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="browser" label="浏览器" />
        <el-table-column prop="time" label="请求耗时" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
            <el-tag v-else-if="scope.row.time <= 1000" type="warning">{{ scope.row.time }}ms</el-tag>
            <el-tag v-else type="danger">{{ scope.row.time }}ms</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建日期" width="180px" />
    </el-table>
    <pagination v-model:page="queryParam.page" v-model:limit="queryParam.size" :total="total" @change="initList()"/>
  </div>
</template>

<script setup>
import {toRefs} from 'vue'
import Pagination from '@/components/Pagination'
import mixins from "@/mixins/mixins";
import CommSearch from "@/components/Comm/CommSearch.vue";


const {initList, total, dataList, data} = mixins()
const {queryParam, loading,  showSearch, baseUrl} = toRefs(data)

baseUrl.value = '/logs'

initList()

</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 70px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
.demo-table-expand .el-form-item__content {
  font-size: 12px;
}
</style>
